<template>
    <n-tooltip trigger="hover">
        <template #trigger>
            <n-cascader
                v-model:value="value"
                :multiple="prop.max > 1"
                placeholder="请选择地区"
                filterable
                cascade
                :check-strategy="prop.max > 1 ? 'parent' : 'all'"
                :options="opts"
                @update:value="doChange"
                label-field="n"
                value-field="c"
                children-field="s"
            >
                <template #action>
                    点击
                    <n-button text @click="execLoad">更新地区数据</n-button>
                </template>
            </n-cascader>
        </template>
        {{ tips || '请选择地区' }}
    </n-tooltip>
</template>

<script lang="ts" setup>
import { ref, onBeforeMount, onMounted } from 'vue'

import { Http } from '@/libs'

const prop = defineProps({
    max: {
        type: Number,
        default: 1,
    },
    value: {},
})

const tips = ref<string>('')

const emit = defineEmits(['update:value'])

const doChange = (vals: any, _opts: any, path: any) => {
    tips.value = path.map((p: any) => p.n).join(' ')
    emit('update:value', vals)
}

const opts = ref([])

const execLoad = () => {
    Http.post('/comm/data/district', {}).then(resp => {
        if (resp.stat.err > 0) {
            return
        }
        opts.value = resp.data.items
        localStorage.setItem('Cache.District.Tree', JSON.stringify(resp.data.items))
    })
}

onBeforeMount(() => {
    let cache = localStorage.getItem('Cache.District.Tree')
    if (cache != '' && cache != null) {
        opts.value = JSON.parse(cache)
    } else {
        execLoad()
    }
})
onMounted(() => {})
</script>
